<template>
  <div id="item_body">
    <h3>商品详情</h3>

    <el-row>
      <div class="img_bo">
        <!-- <span>商品图片</span> -->
        <!-- <img
          src="../assets/img/1.jpg"
          alt=""
         
        /> -->
        <img
          :src="getUrl(itemDetails.photo)"
          style="width: 400px; height: 400px"
          width="160"
        />
      </div>

      <ul class="item_mess">
        <div>
          <span> 商品名字：{{ itemDetails.name }} </span>
        </div>
        <div>
          <span> 商品简介：{{ itemDetails.introduction }} </span>
        </div>

        <div>
          <span> 商品库存：{{ itemDetails.store }} </span>
        </div>
        <div>
          <span> 商品单价：{{ itemDetails.prices }} &nbsp;元起 </span>
        </div>
        <div>
          <span> 商品销量：{{ itemDetails.sales }} </span>
        </div>

        <div>
          <span
            >购买数量：{{ itemDetails.num }}&nbsp;&nbsp;&nbsp;&nbsp;
            <button @click="btn(false)">-</button>&nbsp;&nbsp;<button
              @click="btn(true)"
            >
              +
            </button>
          </span>
        </div>
      </ul>

      <el-col :span="12">
        <div class="op_btns">
          <el-button @click="open_dialog" type="primary"
            ><span>点击下单</span></el-button
          >
          <el-button @click="addShopCart" type="success"
            ><span>加入购物车</span></el-button
          >
          <el-button @click="goShop" type="success"
            ><span>返回商城</span></el-button
          >
        </div>
      </el-col>
    </el-row>
    <el-dialog
      width="30%"
      title="是否确认下单"
      :visible.sync="dialogVisible"
      v-model="dialogVisible"
    >
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="confirmChange"
          >确定下单</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<style scoped>
.op_btns {
  margin-top: 20px;
  margin-left: 500px;
}

.item_mess span {
  width: 300px !important;
  height: 30px;
  float: left !important;
  overflow: hidden !important;
}
.item_mess {
  width: 500px;
}
.item_mess li {
  list-style: none;
}
.img_bo {
  background-color: aqua;
  height: 400px;
  margin-left: 150px;
}
</style>

<script>
import store from '../store'
import { mapGetters } from 'vuex' // mapGetters从整个工程其他地方获取数据
import { select_item_details } from '../api/index'
import { add_orders } from '../api/index'
import { add_to_car } from '../api/index'
import { ElMessage } from 'element-plus'

export default {
  data() {
    return {
      dialogVisible: false,
      itemDetails: {},
      addOrderItem: {},

      iid: '',
      userId: '',
      address: '',
    }
  },

  mounted() {
    this.iid = this.$route.query.itemId
    this.getItemDetails(this.iid)
  },
  computed: {
    // 监控数据的获取
    ...mapGetters([
      'userId',
      'userName',
      'password',
      'realname',
      'phone',
      'address',
      'email',
      'sex',
      'idCard',
      'age',
      'type',
    ]),
  },

  methods: {
    getUrl(url) {
      console.info('url  ' + url)
      let path = `http://localhost:8888/` + url
      console.info('path  ' + path)
      return path
    },
    goShop() {
      this.$router.push('/about')
    },
    confirmChange() {
      this.addOrder()
      this.dialogVisible = false
    },
    open_dialog() {
      if (this.itemDetails.num <= 0) {
        ElMessage({
          message: '请选择购买数量',
          type: 'success',
        })
        return
      }
      this.dialogVisible = true
    },
    //加入购物车
    addShopCart() {
      console.info('addShopCart  store.state.isLogin: ' + store.state.isLogin)
      if (!store.state.isLogin) {
        ElMessage({
          message: '请先登陆',
          type: 'success',
        })
        return
      }
      var car = {
        iid: this.iid,
        uid: this.$store.state.userId,
        name: this.itemDetails.name,
        prices: this.itemDetails.prices,
        number: this.itemDetails.num,
        // address: this.$store.state.address,
      }
      add_to_car(car).then((res) => {
        ElMessage({
          message: res.msg,
          type: 'success',
        })
      })
    },
    //生成订单
    addOrder() {
      //c
      var orders = {
        iid: this.iid,
        uid: this.$store.state.userId,
        prices: this.itemDetails.prices,
        number: this.itemDetails.num,
        address: this.$store.state.address,
      }

      add_orders(orders).then((res) => {
        console.log('res  ' + res.msg)
        ElMessage({
          message: res.msg,
          type: 'success',
        })
      })
    },

    btn(bool) {
      console.log(bool)
      if (bool) {
        this.itemDetails.num++
      } else {
        if (this.itemDetails.num == 0) return
        this.itemDetails.num--
      }
    },
    getItemDetails(iid) {
      console.info('iid: ' + iid)
      select_item_details(iid)
        .then((res) => {
          console.info('res  ' + res.map.itemDetail)
          this.itemDetails = res.map.itemDetail
        })
        .catch()
    },
  },
}
</script>
